<template>
  <div class="tags">
    <!-- <span class="span" v-for="item in views" :key="item.path">{{item.meta.title}}</span> -->
    <el-tag
      :class="nowPath == item.path?'active':''"
      style="margin-right:4px;box-shadow:2px 2px 2px #ccc;"
      :key="item.name"
      v-for="(item,index) in views"
      :type="type"
      :closable="!item.meta.all"
      :disable-transitions="false"
      @contextmenu.prevent.native="rightMenu($event,item,index)"
      @close="handleClose(item)"
    >
      <router-link :to="item.path">{{item.meta.title}}</router-link>
    </el-tag>
    <div class="rightMenu card" v-show="rightClick" :style="style">
      <div class="item" @click="rightMenuSet(1)">关闭右侧</div>
      <div class="item" @click="rightMenuSet(2)">关闭左侧</div>
      <div class="item" @click="rightMenuSet(0)">关闭全部</div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      rightClick: false,
      type: "info",
      style: {
        position: "absolute",
        "z-index": "99999",
        top: "46px",
        left: 0
      },
      rightMenuKey: null
    };
  },
  computed: {
    views: function() {
      return this.$store.state.tagsView.visitedPath;
    },
    nowPath: function() {
      console.log(this.$route.path);
      return this.$route.path;
    }
  },
  watch: {
    rightClick: function(v) {
      if (v) {
        window.addEventListener(
          "click",
          () => {
            this.rightClick = false;
          },
          true
        );
      }
    }
  },
  mounted() {
    //  console.log(this.$store.state.tagsView)
  },
  methods: {
    rightMenuSet(v) {
      if (v == 0) {
        this.$store.commit("visitedPathReset");
      }
      if (v == 1) {
        this.$store.commit("visitedRightSetR", this.rightMenuKey + 1);
      }
      if (v == 2) {
        this.$store.commit("visitedRightSetL", this.rightMenuKey - 1);
      }
      this.resetPath();
    },
    rightMenu(event, item, i) {
      console.log(event);
      this.style.left = `${event.pageX}px`;
      this.rightClick = true;
      this.rightMenuKey = i;
      console.log(item);
    },
    handleClose(item) {
      this.views.splice(this.views.indexOf(item), 1);
      this.resetPath();
    },
    resetPath() {
      let path = this.$store.state.tagsView.visitedPath[
        this.$store.state.tagsView.visitedPath.length - 1
      ].path;
      let query = this.$store.state.tagsView.visitedPath[
        this.$store.state.tagsView.visitedPath.length - 1
      ].query;
      if (query != {}) {
        this.$router.push({ path, query });
      } else {
        this.$router.push(path);
      }
    }
  },
  created() {}
};
</script>
<style lang='scss' scoped>
.tags {
  line-height: normal;
  white-space: nowrap;
  .active {
    background-color: rgb(48, 65, 86);
    a,
    /deep/ i {
      color: #fff;
    }
  }
}
.rightMenu {
  .item {
    font-size: 14px;
    line-height: 20px;
    padding:6px ;
    cursor: pointer;
    &:hover {
      background-color: #ccc;
    }
  }
}
</style>